<template>
	<view class="m-train" @click="handleClick">
		<view class="tip-text">{{tipText}}</view>

		<view class="farther" @click.stop="handleStopClick">
			<view class="border" :style="{width:borderPercent* 100 + '%',height:borderPercent* 100 + '%'}">

			</view>

			<view class="son" @click.stop="handleSonClick"></view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				totalNumber: 100,
				borderNumber: 100,
				centerNumber: 30,
				roundClicked: false,
				interValId: null,
				tipText: ""

			}
		},
		computed: {
			borderPercent() {
				let percent = (this.borderNumber / this.totalNumber).toFixed(2)
				return percent
			}
		},
		watch: {
			// borderPercent: {
			// 	handler(newVal, oldVal) {
			// 		if (newVal <= 0) {
			// 			console.log("百分比", newVal, this.roundClicked);
			// 			if (this.roundClicked) {
			// 				this.roundClicked = false
			// 			} else {
			// 				console.log('miss', '一轮结束');
			// 			}
			// 		}
			// 	},
			// 	deep: true
			// }
		},
		methods: {
			handleStopClick() {
				clearInterval(this.interValId)
			},
			handleClick() {
				// this.borderNumber--
				this.interValId = setInterval(() => {
					if (this.borderNumber <= 0) {
						if (this.roundClicked) {
							this.roundClicked = false
						} else {
							this.tipText = "miss"
							console.log('miss', '一轮结束');
						}
						this.borderNumber = 100

					}
					this.borderNumber = this.borderNumber - 5
				}, 100)
			},
			handleSonClick() {
				if (this.roundClicked) {
					return
				}
				let percent = (this.borderNumber / this.totalNumber).toFixed(2)
				let centerPercent = (this.centerNumber / this.totalNumber).toFixed(2)
				this.roundClicked = true
				if (percent > centerPercent + 0.05) {
					this.tipText = "cool"
					console.log("cool")
				} else if ((percent <= centerPercent + 0.05) && (percent >= centerPercent - 0.05)) {
					this.tipText = "perfect"
					console.log("perfect");
				} else {
					this.tipText = "miss"
					console.log("miss")
				}
				// this.borderNumber = 100

				console.log("进度是", percent);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-train {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		background-color: pink;
		z-index: 999;

		.tip-text {
			width: 100%;
			font-size: 50rpx;
			color: #fff;
			text-align: center;
			position: absolute;
			left: 0rpx;
			top: 50rpx;
		}

		.farther {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 50%;
			bottom: 500rpx;
			width: 300rpx;
			height: 300rpx;
			background-color: skyblue;
			display: flex;
			justify-content: center;
			align-items: center;

		}

		.border {

			width: 100%;
			height: 100%;
			border-radius: 50%;
			box-sizing: border-box;
			border: 6rpx solid #fff;
			transform: all 0.1s;

		}

		.son {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 30%;
			height: 30%;
			border-radius: 50%;
			background-color: #fff;
		}
	}
</style>